<script lang="ts">
    //底部导航按钮
    import { url, admin_state, sidebar, myCardArray, main_grid_cols, shebeiState, jiankongState, motionmodeState } from '$lib/data';
    url.set("/");

    import Main from './Robot/main.svelte';
    import UserMain from './Robot-user/main.svelte'
    import Can from './Robot-user/canvas.svelte'
    import Mo from './Robot/motor.svelte';
    // import Stm32 from './Robot/STM32.svelte';
    import AdminSw from "./adminswitch.svelte"
    import UserSw from "./userswitch.svelte"
    import { P, Card, Badge, ButtonGroup, Button } from 'flowbite-svelte';
    import { AngleLeftOutline } from 'flowbite-svelte-icons';

    import { quintOut, elasticOut, backOut } from 'svelte/easing';
    import { fade, fly, draw, slide } from 'svelte/transition';
    import { flip } from 'svelte/animate';

</script>


<div transition:slide class="mt-2 flex items-start">

    {#if $sidebar}
    <div transition:slide={{ axis: 'x' }} class="" >
        <Card transition={slide} class="mx-2 overflow-y-auto overflow-x-hidden" >
            <div class="absolute flex">
                {#if !$shebeiState}
                    <div in:fly={{ x: -600, duration: 500 }} out:fly={{ x: -200, duration: 200 }}>
                        <Button size="xs" color="light" pill onclick={() => {$shebeiState = !$shebeiState}}>设备控制</Button>
                    </div>
                {/if}
                {#if !$jiankongState}
                    <div in:fly={{ x: -600, duration: 500 }} out:fly={{ x: -200, duration: 200 }}>
                        <Button size="xs" color="light" pill onclick={() => {$jiankongState = !$jiankongState}}>监控台</Button>
                    </div>
                {/if}
                {#if !$motionmodeState}
                <div in:fly={{ x: -600, duration: 500 }} out:fly={{ x: -200, duration: 200 }}>
                    <Button size="xs" color="light" pill onclick={() => {$motionmodeState = !$motionmodeState}}>运动模式选择</Button>
                </div>
            {/if}
            </div>
            <Button class="w-1/5 ml-[17rem] mb-2" color="purple" pill onclick={() => sidebar.update(value => value = !value)}>
                    <AngleLeftOutline /><AngleLeftOutline />
            </Button>
            {#if $admin_state}
                <AdminSw ></AdminSw>
            {:else}
                <UserSw></UserSw>
            {/if}
        </Card>
    </div>
    {/if}

    <div transition:slide={{ axis: 'y' }} class="bg-white 
    dark:bg-gray-800 text-gray-500 
    dark:text-gray-400 rounded-lg border border-gray-200 
    dark:border-gray-700 divide-gray-200 
    dark:divide-gray-700 shadow-md flex flex-col p-4 
    sm:p-6 w-[100%] mx-2 
    transition-shadow duration-300 ease-in-out hover:shadow-lg ">
        <div class="text-center">
            <span color="text-teal-700 dark:text-teal-500 me-1">我的设备</span>
        </div>
        {#if $admin_state}
            <div class="grid grid-cols-{$main_grid_cols} gap-4 place-items-start ">
                {#each $myCardArray as id}
                    <Main name={id} />
                {/each}
            </div>      
        {:else}
            <div class="">
                <UserMain></UserMain>
            </div>
        {/if}
    </div>

</div>

<style>

</style>

